<template>
    <div class="fillcontain">
        <head-top/>
        <div class="table_container">
            <el-table
                    :data="tableData"
                    style="width: 100%"
            >
                <el-table-column
                        label="案例ID"
                        prop="id"
                />
                <el-table-column
                        label="案例名字"
                        prop="name"
                />
                <el-table-column
                        label="案例内容"
                        prop="description"
                />
                <el-table-column
                        label="创建用户"
                        prop="user.name"
                />
                <el-table-column
                        label="创建时间"
                        prop="createTime"
                />
                <el-table-column
                        label="操作"
                        width="200"
                >
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>


            <div class="Pagination">
                <el-pagination
                        :current-page="currentPage"
                        :page-size="20"
                        layout="total, prev, pager, next"
                        :total="tableData.length"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                offset: 0,
                limit: 20,
                count: 0,
                tableData: [],
                currentPage: 1,
            }
        },
        created() {
            this.initData();
        },

        methods: {
            initData() {
                for (let i = 1; i <= 10; i++)
                    this.tableData.push({
                        id: i,
                        name: '实例' + i,
                        description: '实例' + i + '描述',
                        user: {
                            name: '用户' + i
                        },
                        createTime: new Date().toISOString()
                    });
            }
        },
    }
</script>

<style>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }

    .table_container {
        padding: 20px;
    }

    .Pagination {
        display: flex;
        justify-content: flex-start;
        margin-top: 8px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }

    .avatar {
        width: 120px;
        height: 120px;
        display: block;
    }
</style>
